<template>
  <!-- 登录页面 B -->
  <div class="login-body">
    <div class="bg">
      <div class="login-page">
        <h2 class="title">个人中心登录</h2>
        <form @submit.prevent="handleSubmit">
          <div class="input">
            <label for="username">用户名:</label>
            <input
              type="text"
              id="username"
              placeholder="输入账号..."
              v-model="username"
              required
            />
          </div>
          <div class="input">
            <label for="password">密码:</label>
            <input
              type="password"
              id="password"
              placeholder="输入密码..."
              v-model="password"
              required
            />
          </div>
          <div class="but">
            <button type="submit" @click="toggleloginShow">登录</button>
          </div>
        </form>
      </div>
    </div>
  </div>
  <!-- 登录页面 E   -->
  <div class="core" v-show="loginShow">
    <div class="core-card">
      <div class="c-body">
        <div class="img"></div>
        <div class="core-name">Zwz_22002358</div>
         <div class="core-ck">仓库：<a href="https://gitee.com/zwz031228/task.git">https://gitee.com/zwz031228/task.git</a></div>
        <div class="c-but">
          <button @click="toHome">返回首页</button>
          <button @click="toggleloginShow">退出登录</button>
        </div>
      </div>
    </div>
  </div>
</template>
  <script>
export default {
  data() {
    return {
      username: '',
      password: '',
      loginShow: false //默认内容不显示
    }
  },
  methods: {
    handleSubmit() {
      console.log('Username', this.username)
      console.log('Password', this.password)
    },
    toggleloginShow() {
      this.loginShow = !this.loginShow //使false变为true显示
    },
    toHome() {
      this.$router.push({
        path: '/'
      })
    }
  }
}
</script>

<style scoped>
/* 登录页面 */
.login-body {
  width: 100%;
  height: 100vh;

  background: url(../components/images/bg3.jpg) no-repeat;
  background-size: 100% 100%;
}

.bg {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #000000af;
}
.login-page {
  width: 500px;
  padding: 50px;
  border: 2px solid #ffffffad;
  border-radius: 5px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.title {
  margin-bottom: 20px;
  width: 100%;
  text-align: center;
  font-size: 30px;
  font-weight: 600;
  color: #fff;
}
.input {
  margin: 0 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.input label {
  width: 20%;
  text-align: left;
  font-size: 16px;
  font-weight: 600;
  color: #fff;
}

.input input {
  width: 80%;
  padding: 10px 15px;
  background-color: #0000006d;
  color: #ffffff;
  border: none;
}
.input input::placeholder {
  color: #ffffffb4;
  font-size: 14px;
}
.but {
  margin-top: 20px;
  width: 100%;
  text-align: center;
}
button {
  padding: 5px 40px;
  background-color: #ff5f00;
  color: #fff;
  border: none;
  border-radius: 15px;
  cursor: pointer;
}

/* 个人中心 */
.core {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #2e2e36;
}

.core-card {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.core-card .img {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: url(../components/images/tx.jpg) no-repeat;
  background-size: 110%;
}

.core-name {
  font-size: 30px;
  color: #fff;
  margin-top: 20px;
  text-align: center;
}
.c-but {
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.c-but button {
  margin-top: 30px;
  padding: 10px 30px;
}
.c-but a {
  color: #fff;
}
.core-ck,
.core-ck a{
  color: #fff;
}
</style>